<template>
  <div class="whiteBox container-fluid">
    <div class="row justify-content-md-center">
      <div class="col-md-12 col-12 font">
        <p>{{head.title}}</p>
        <p>{{head.info}}</p>
      </div>
    </div>
    <div class="row justify-content-md-around  justify-content-center">
      <div class="col-md-3 col-10 infoBox" v-for="item in info" :key="item.id">
        <p>{{item.title}}</p>
        <p>{{item.titleInfo}}</p>
        <div class="imgBox"><img :src="item.imgUrl"></div>
        <p>{{item.info}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      "head": {
        'title': "关于Cereshop",
        "info": "“Cereshop”是深圳中科鑫智科技有限公司旗下的云计算服务品牌，专注为个人开发者用户、中小型、大型企业用户提供一站式核心网络部署服务，促使用户云端部署化简为零，轻松快捷运用云计算。Cereshop是国内为数不多具有ISP/IDC双资质的专业云计算服务商，同时持有系统软件著作权证书、CNNIC地址分配联盟成员证书，通过了ISO27001信息安全管理体系国际认证、ISO9001质量保证体系国际认证"
      },
      "info": [
        {
          'id': 0,
          'title': '我们的使命',
          'titleInfo': '让软件变得更简单',
          'info': '提供强大、简单的软件，想客所想、急客户之所急、满客户之所愿',
          'imgUrl': 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/6987e38b-5219-49f8-92c0-09abbf26c78a.png'
        },
         {
          'id': 1,
          'title': '我们的使命',
          'titleInfo': '让软件变得更简单',
          'info': '提供强大、简单的软件，想客所想、急客户之所急、满客户之所愿',
          'imgUrl': 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/6987e38b-5219-49f8-92c0-09abbf26c78a.png'
        },
         {
          'id': 2,
          'title': '我们的使命',
          'titleInfo': '让软件变得更简单',
          'info': '提供强大、简单的软件，想客所想、急客户之所急、满客户之所愿',
          'imgUrl': 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/6987e38b-5219-49f8-92c0-09abbf26c78a.png'
        }

      ]
    }
  }
}
</script>

<style lang="less" scpoed>
.whiteBox {
  padding: 6.19rem 0rem !important;
  .font {
    p {
      text-align: center;
    }
    p:nth-child(1) {
      font-size: 3rem;
      //   font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:nth-child(2) {
      padding: 0 3rem;
      font-size: 1.13rem;
      //   font-family: PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 2.25rem;
    }
  }
  .infoBox {
    // margin-bottom: 3.75rem;
    margin-top: 3.75rem;
    background-color: #95a8bd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 3rem !important;
    .imgBox {
      margin-top: 3.18rem;
      margin-bottom: 3.25rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 11.25rem;
      height: 11.25rem;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      img {
        width: 90%;
      }
    }
    p {
      text-align: center;
      color: #ffffff;
    }
    p:nth-child(1) {
      font-size: 1.88rem;
      font-weight: bold;
    }
    p:nth-child(2) {
      font-size: 1.5rem;
      font-weight: 500;
    }
    p:nth-child(3) {
      font-size: 1.13rem;
      font-weight: 500;
    }
  }
}
</style>